<template>
  <div :class="voteMb == 3 ? 'mb3-index-bgColor' : voteMb == 2 ? 'mb2-index-bgColor' : ''">
    <div class="" v-if="isPlayer == 1" :class="voteMb == 2 ? 'mb2-bg' : voteMb == 3 ? 'mb3-bg' : ''">
      <div class="c-flex-row c-p"
        :class="[voteMb == 2 ? playerList.length > 2 ? 'c-justify-sa c-ph20 mb2-top-bg' : 'mb2-top-bg' : voteMb == 3 ? playerList.length > 2 ? 'mb3-top-bg c-justify-sa c-ph10' : 'mb3-top-bg' : playerList.length > 2 ? 'c-justify-sa' : '', isIncrease == 1 ? (voteMb == 1 ? 'hh528 rang-bg1' : voteMb == 2 ? 'hh536' : 'hh452 pt126') : (voteMb == 1 ? 'hh438 rang-bg' : voteMb == 2 ? 'hh448' : 'hh417 pt92')]">
        <div class="c-pa c-p-l0 c-fs22 c-fc-white c-w100 c-flex-row c-hh52 c-aligni-center" :class="voteMb == 2 ? 'c-p-t28 c-lh50' : voteMb == 3 ? 'c-p-t32 lh52' : 'c-p-t28 lh52'">
          <div class="c-mlr-auto c-h c-p" v-if="isIncrease == 1" :class="tabNum == 2 ? 'c-ww260' : 'c-ww330'">
            <div v-if="voteMb == 2 && isIncrease == 1" class="mt7 ml7 bg-pink c-h c-br10 bd1-black c-w100"></div>
            <div v-if="voteMb == 2" class="c-fs22 c-pa c-p-t0 c-p-l0 c-hh50 c-w100 c-h bd1-black c-br10">
              <div class="c-w100 c-flex-row c-h c-br10">
                <div v-if="tabNum == 2" class="c-w100 c-flex-row c-h">
                  <div class="c-w0 c-flex-grow1 flex-basis c-textAlign-c c-ws-n" v-for="(item, index) in nameArr" :key="index" @click="changeModalTwoTab(index, item)" :class="[index == modalTwoIndex ? 'c-bg-white fc-lred' : 'bg-lred c-fc-white', index == 0 ? 'c-br-tl10 c-br-bl10' : '', index == 1 ? 'bd1-black-left c-br-tr10 c-br-br10' : '']">{{item}}</div>
                </div>
                <div v-if="tabNum == 3" class="c-w100 c-flex-row c-h">
                  <div class="c-w0 c-flex-grow1 flex-basis c-textAlign-c c-ws-n" v-for="(item, index) in nameArr" :key="index" @click="changeModalTwoTab(index, item)" :class="[index == modalTwoIndex ? 'c-bg-white fc-lred' : 'bg-lred c-fc-white', index == 0 ? 'c-br-tl10 c-br-bl10' : '', index == 2 ? 'c-br-tr10 c-br-br10' : '', modalTwoIndex == 0 ? index == 0 ? 'bd1-black-right' : index == 2 ? 'c-p beforeLine' : '' : '', modalTwoIndex == 1 && index == 1 ? 'bd1-black-right bd1-black-left' : '', modalTwoIndex == 2 ? index == 0 ? 'c-p afterLine' : index == 2 ? 'bd1-black-left' : '' : '']">{{item}}</div>
                </div>
              </div>
            </div>
            <div v-else class="c-fs22 c-w100 c-br28 c-h">
              <div class="c-w100 c-flex-row c-br28 c-p c-h">
                <div class="c-w100 c-opacity30 c-w100 c-bg-white c-br28"></div>
                <div class="c-pa c-w100 c-p-t0 c-p-l0 c-flex-row">
                  <div v-if="tabNum == 2" class="c-w100 c-flex-row c-h">
                    <div class="c-w0 c-flex-grow1 flex-basis c-textAlign-c c-ws-n" @click="changeTab(index, item)" v-for="(item, index) in nameArr" :key="index" :class="index == modalOtherIndex ? voteMb == 1 ? 'c-bg-white fc-blue c-br28' : 'c-bg-white fc-brown c-br28' : 'c-fc-white'">{{item}}</div>
                  </div>
                  <div v-if="tabNum == 3" class="c-w100 c-flex-row c-h">
                    <div class="c-w0 c-flex-grow1 flex-basis c-textAlign-c c-ws-n" @click="changeTab(index, item)" v-for="(item, index) in nameArr" :key="index" :class="[index == modalOtherIndex ? voteMb == 1 ? 'c-bg-white fc-blue c-br28' : 'c-bg-white fc-brown c-br28' : 'c-fc-white', modalOtherIndex == 0 && index == 2 ? 'c-fc-white c-p beforeLine' : '', modalOtherIndex == 2 && index == 0 ? 'c-fc-white c-p afterLine' : '']">{{item}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-pa c-p-r0 c-pr16 c-pz99 c-pl20" :class="voteMb == 2 ? 'mb2-detail-bg c-pv15' : voteMb == 3 ? 'mb3-detail-bg' : 'activities-class'" @click="goToIndex">活动首页</div>
        </div>

        <div class="c-p" v-if="playerList[1] && playerList.length > 1"
          :class="[voteMb == 2 ? playerList.length == 2 ? 'ml44' : '' : voteMb == 3 ? playerList.length == 2 ? 'c-ml40' : '' : playerList.length == 2 ? 'c-ml20' : '', isIncrease == 1 ? (voteMb == 1 ? 'mt164' : voteMb == 2 ? 'mt168' : 'mt88') : (voteMb == 1 ? 'mt68' : voteMb == 2 ? 'mt74' : 'mt88')]">
          <div @click="goPlayerDetail(1)">
            <img :src="voteMb == 2 ? require('@/assets/i/wap/voting/22mb2.png') : require('@/assets/i/wap/voting/2.png')" alt="" class="c-pa" :class="voteMb == 2 ? 'two-mb2-posa' : 'two-posa c-ww130'"
              v-if="voteMb != 3">
            <div class="c-brp50 c-text-hidden" :class="voteMb == 3 ? 'mb3-2br' : voteMb == 2 ? 'mb2-2size' : 'tw-size'">
              <img :src="$addXossFilter((playerList[1].source == 1 ? playerList[1].images[0] : playerList[1].headimgurl), require('@/assets/defult_head.png'))" alt="" class="c-w100 c-h">
            </div>
          </div>
          <div class="c-flex-column c-ww160 c-textAlign-c c-mt16">
            <span class="c-fs20 c-lh c-fw700" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[1].name | nameFilter(0)}}</span>
            <span class="c-fs20 c-mt12 c-lh c-fw400" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[1].number}}号</span>
            <div class="c-fs24 c-w100 c-textAlign-c c-lh" :class="voteMb == 2 ? TabType == 2 || rankType == 2 ? 'fcA35F0C mb2-num1 c-pl16' : 'fcA35F0C mb2-num1 c-pl8' : voteMb != 3 ? 'c-fc-white mb1-num1 ' : 'mb3-num1 c-pa'">
              <span :class="voteMb == 3 ? 'fc-pruple' : ''" class="c-ws-n">{{playerList[1].voteNum | filterTicketShow}}</span>
            </div>
          </div>
        </div>
        <div class="c-p"
          :class="[voteMb == 2 ? playerList.length == 1 ? 'c-m-0auto' : playerList.length == 2 ? 'c-ml40' : '' : voteMb == 3 ? playerList.length == 1 ? 'c-mlr-auto' : playerList.length == 2 ? 'ml36' : '' :  playerList.length == 1 ? 'c-mlr-auto' : playerList.length == 2 ? 'ml-24' : '', isIncrease == 1 ? (voteMb == 1 ? 'mt116' : voteMb == 2 ? 'mt116' : 'mt64') : (voteMb == 1 ? 'mt22' : voteMb == 2 ? 'c-mt20' : 'mt64')]" v-if="playerList[0]">
          <div @click="goPlayerDetail(0)">
            <img :src="voteMb == 2 ? require('@/assets/i/wap/voting/11mb2.png') : require('@/assets/i/wap/voting/1.png')" alt="" :class="voteMb == 2 ? 'one-mb2-posa' : 'c-ww130 one-posa'" class="c-pa"
              v-if="voteMb != 3">
            <div class="c-brp50 c-text-hidden" :class="voteMb == 3 ? 'mb3-1br' : 'tw-size'">
              <img :src="$addXossFilter((playerList[0].source == 1 ? playerList[0].images[0] : playerList[0].headimgurl), require('@/assets/defult_head.png'))" alt="" class="c-w100 c-h">
            </div>
          </div>
          <div class="c-flex-column c-ww160 c-textAlign-c c-mt16">
            <span class="c-fs20 c-lh c-fw700" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[0].name | nameFilter(0)}}</span>
            <span class="c-fs20 c-mt12 c-lh c-fw400" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[0].number}}号</span>
            <div class="c-w100 c-textAlign-c c-lh" :class="voteMb == 2 ? TabType == 2 || rankType == 2 ? 'fcA35F0C mb2-num2 c-pl6 c-fs30' : 'fcA35F0C mb2-num2 c-fs30': voteMb != 3 ? playerList.length == 1 ? 'c-fc-white mb1-num2 c-fs24' : 'c-fc-white mb1-num2 c-fs24' : 'mb3-num1 c-pa c-fs24'">
              <span :class="voteMb == 3 ? 'fc-pruple' : ''" class="c-ws-n">{{playerList[0].voteNum | filterTicketShow}}</span>
            </div>
          </div>
        </div>
        <div class="c-p" :class="isIncrease == 1 ? (voteMb == 1 ? 'mt188' : voteMb == 2 ? 'mt190' : 'mt88') : (voteMb == 1 ? 'mt92' : voteMb == 2 ? 'mt94' : 'mt88')" v-if="playerList[2] && playerList.length > 2">
          <div @click="goPlayerDetail(2)">
            <img :src="voteMb == 2 ? require('@/assets/i/wap/voting/33mb2.png') : require('@/assets/i/wap/voting/3.png')" alt="" class="c-ww130 c-pa" :class="voteMb == 2 ? 'th-mb2-posa' : 'th-posa'"
              v-if="voteMb != 3">
            <div class="c-brp50 c-text-hidden" :class="voteMb == 3 ? 'mb3-3br' : 'th-size'">
              <img :src="$addXossFilter((playerList[2].source == 1 ? playerList[2].images[0] : playerList[2].headimgurl), require('@/assets/defult_head.png'))" alt="" class="c-w100 c-h">
            </div>
          </div>
          <div class="c-flex-column c-ww160 c-textAlign-c c-mt16" :class="voteMb == 3 ? 'c-pr20' : ''">
            <span class="c-fs20 c-lh c-fw700" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[2].name | nameFilter(0)}}</span>
            <span class="c-fs20 c-mt12 c-lh c-fw400" :class="voteMb != 3 ? 'c-fc-white' : ''">{{playerList[2].number}}号</span>
            <div class="c-fs24 c-w100 c-textAlign-c c-lh" :class="voteMb == 2 ? TabType == 2 || rankType == 2 ? 'fcA35F0C mb2-num3 mr-4' : 'fcA35F0C mb2-num3 mr-4' : voteMb != 3 ? 'c-fc-white mb1-num3' : 'mb3-num1 c-pa c-pr20'">
              <span :class="voteMb == 3 ? 'fc-pruple' : ''" class="c-ws-n">{{playerList[2].voteNum | filterTicketShow}}</span>
            </div>
          </div>
        </div>
      </div>
      <div :class="voteMb == 2 ? 'mt-05 c-p c-ph12' : voteMb == 3 ? 'c-mt40 c-ph12 c-pb10' : ''">
        <img src="../../../assets/i/wap/voting/bgTop.png" v-if="voteMb == 2" alt="">
        <div class="c-p minh440" :class="voteMb == 2 ? 'mb2-bg-center c-pl30 pr42 mr50' : voteMb == 3 ? 'c-br16 c-bg-white c-ph30 mrt50' : isIncrease == 0 ? 'c-br-tl16 c-br-tr16 c-bg-white c-ph30 mrt50' : 'c-br-tl16 c-br-tr16 c-bg-white c-ph30 mrt12'">
          <div class="c-flex-row c-aligni-center c-fs20" v-if="playerList.length > 3 && index > 2" v-for="(item, index) in playerList" :key="index" @click="goPlayerDetail(index)">
            <div class="c-ww50 c-fc-gray c-pv26">{{index + 1}}</div>
            <div class="c-flex-row c-w100 c-bd-b1-mgray c-pv26">
              <img class="c-ww68 c-hh68 c-brp50" :src="$addXossFilter((item.source == 1 ? item.images[0] : item.headimgurl), require('@/assets/defult_head.png'))" alt="" />
              <div class="c-pl20 c-flex-grow1 c-flex-column c-justify-sb">
                <span class="c-textAlign-l c-fs24">{{item.name | nameFilter(1)}}</span>
                <span class="c-fc-gray c-textAlign-l c-fs20">{{item.number}}号</span>
              </div>
              <span class="c-justify-end c-lh68 c-fs24 c-ws-n">{{item.voteNum | filterTicketShow}}</span>
            </div>
          </div>
          <loading-status-tem :dataStatus="dataStatus" v-if="playerList.length > 3"></loading-status-tem>
          <div v-if="playerList.length <= 3" class="minh440 c-pv85">
            <div class="">
              <img src="../../../assets/i/wap/voting/noData.png" alt="" class="c-m-0auto c-ww240 c-hh170">
              <div class="c-textAlign-c c-fs24 c-fc-sblack">暂无更多选手</div>
            </div>
          </div>
        </div>
        <img src="../../../assets/i/wap/voting/bgBottom.png" alt="" v-if="voteMb == 2" style="margin-top:-0.05rem">
      </div>
    </div>
    <div v-if="isPlayer == 2" class="c-pt80">
      <img src="../../../assets/i/wap/voting/noData.png" alt="" class="c-m-0auto c-ww240 c-hh170">
      <div class="c-textAlign-c c-fs24 c-mt20" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-sblack'">暂无选手</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let pageIndex = 1
export default {
  name: "playerRank",
  components: {
    loadingStatusTem
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      voteCustomName: localStorage.getItem("voteCustomName"),
      dataStatus: 'HAS_MORE_DATA',
      playerList: [],
      voteId: '',
      isPlayer: 0,
      info: {},
      voteMb: 1,
      rankType: '', //1 投票排行 2 浏览排行 3 双选
      TabType: '', //接收接口返回参数,含义同rankType
      nameArr: [],
      modalTwoIndex: 0,
      modalOtherIndex: 0,
      tabNum: 0, //2显示两个tab, 3显示三个tab
      isIncrease: 0 // 0只有一个tab, 1有2个或3个tab
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  filters: {
    nameFilter(value, type) {
      let length = type == 0 ? 6 : 8;
      if (value.length > length) {
        return `${value.substr(0, length)}...`
      } else {
        return value
      }
    },
    filterTicketShow(val) {
      if (val.indexOf('票') > -1) {
        if (val.slice(0, -1).length > 5) {
          return `${parseInt(val.slice(0, -1) / 10000)}万+票`
        } else {
          return val
        }
      } else {
        if (val.slice(0, -2).length > 5) {
          return `${parseInt(val.slice(0, -2) / 10000)}万+浏览`
        } else {
          return val
        }
      }
    }
  },
  activated() {
    // 初始化页面数据
    setDocumentTitle("选手排行");
    pageIndex = 1
    this.rankType = ''
    this.TabType = ''
    this.modalTwoIndex = 0
    this.modalOtherIndex = 0
    this.tabNum = 0
    this.isIncrease = 0
    this.playerList = []
    this.isPlayer = 0
    this.dataStatus = 'HAS_MORE_DATA';
    this.voteId = this.$route.query.id || 0
    this.info = {}
    this.voteMb = localStorage.getItem('voteMb') ? localStorage.getItem('voteMb') : 1
    this.getEnroll()
    this.getVoteDetail()
    utilJs.toPageScrollTop()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    // 活动首页
    goToIndex() {
      this.$routerGo(this, "push", {
        path: "/homePage/voting/votingActivity",
        query: {
          id: this.voteId,
          //refereeId: localStorage.getItem("userId")
        }
      })
    },
    // 进入选手详情
    goPlayerDetail(index) {
      let pId = this.playerList[index].id
      this.$routerGo(this, "push", {
        path: "/homePage/voting/contestantDetail",
        query: {
          id: pId,
          //refereeId: localStorage.getItem("userId")
        }
      })
    },
    //活动详情
    getVoteDetail() {
      let url = `${global.apiurl}activity/vote/activityDetail/${this.voteId}?type=2`
      utilJs.getMethod(url, res => {
        //setDocumentTitle(res.name);
        this.info = res
        this.wechatShare()
      })
    },
    // 获取排行
    getEnroll() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let limit = pageIndex == 1 ? 13 : 10
      let url = `${global.apiurl}activity/vote/playerList?actId=${Number(this.voteId)}&page=${pageIndex}&limit=${limit}&rankType=${this.rankType}`
      utilJs.getMethod(url, (res) => {
        this.TabType = res.activity.rankType;
        this.nameArr = [];
        if (res.activity.rankType == 3) {
          this.nameArr = this.nameArr.concat(this.voteCustomName.length > 2 ? `${this.voteCustomName.substr(0, 2)}...` : `${this.voteCustomName}`, '浏览')
        } else if (res.activity.rankType == 5) {
          this.nameArr = this.nameArr.concat(this.voteCustomName.length > 2 ? `${this.voteCustomName.substr(0, 2)}...` : `${this.voteCustomName}`, '礼物')
        } else if (res.activity.rankType == 6) {
          this.nameArr = this.nameArr.concat(this.voteCustomName.length > 2 ? `${this.voteCustomName.substr(0, 2)}...` : `${this.voteCustomName}`, '礼物')
        } else if (res.activity.rankType == 7) {
          this.nameArr = this.nameArr.concat(this.voteCustomName.length > 2 ? `${this.voteCustomName.substr(0, 2)}...` : `${this.voteCustomName}`, '浏览', '礼物')
        }
        if (res.activity.rankType == 3 || res.activity.rankType == 5 || res.activity.rankType == 6) {
          this.tabNum = 2;
        } else {
          this.tabNum = 3;
        }
        if (res.activity.rankType >= 3 && res.activity.rankType != 4) {
          this.isIncrease = 1
        }
        if (pageIndex == 1) {
          this.voteMb = res.activity.templateType ? res.activity.templateType : 1
          localStorage.setItem('voteMb', this.voteMb)
          if (res.playerList.data.length > 0) {
            this.isPlayer = 1
          } else {
            this.isPlayer = 2
          }
          this.playerList = res.playerList.data
        } else {
          this.playerList = [...this.playerList, ...res.playerList.data]
        }
        if (res.playerList.to * 1 == res.playerList.total * 1) {
          this.dataStatus = res.playerList.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, faile => {
        if (this.playerList == 0) {
          this.isPlayer = 2
        }
        this.dataStatus = 'DATA_ERROR'
      })
    },
    changeTab(index, item) {
      console.log(item, 111)
      let str = item.length > 2 ? item.substr(0, 2) : item;
      this.rankType = this.voteCustomName.indexOf(str) > -1 ? 1 : str == '浏览' ? 2 : 4;
      this.modalOtherIndex = index
      pageIndex = 1;
      this.playerList = [];
      this.getEnroll()
    },
    changeModalTwoTab(index, item) {
      console.log(item, 22)
      let str = item.length > 2 ? item.substr(0, 2) : item;
      this.rankType = this.voteCustomName.indexOf(str) > -1 ? 1 : str == '浏览' ? 2 : 4;
      this.modalTwoIndex = index
      pageIndex = 1;
      this.playerList = [];
      this.getEnroll()
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.playerList.length > 3) {
          this.getEnroll();
        }
      });
    },
    //分享
    wechatShare: function () {
      //shareImg 分享图标
      //shareTitle 分享标题
      //shareWords 分享文案'
      let shareDesc = this.info.shareWords ? this.info.shareWords : `我正在参加${this.info.name}，快来为我助力吧~`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/playerRank?id=${this.voteId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.info.shareImg ? this.info.shareImg : this.info.cover
      let title = this.info.shareTitle ? this.info.shareTitle : "一起来围观活动排行吧！"
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let shareDesc = this.info.shareWords ? this.info.shareWords : `我正在参加${this.info.name}，快来为我助力吧~`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/playerRank?id=${this.voteId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.info.shareImg ? this.info.shareImg : this.info.cover
      let title = this.info.shareTitle ? this.info.shareTitle : "一起来围观活动排行吧！"
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
  }
}
</script>

<style scoped>
.rang-bg {
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/plRang.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.rang-bg1 {
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/rang-bg1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.one-posa {
  top: 0rem;
  left: 0.5rem;
}
.two-posa {
  top: 0rem;
  left: 0.5rem;
}
.tw-size {
  margin-left: 0.69rem;
  margin-top: 0.5rem;
  width: 2.65rem;
  height: 2.65rem;
}
.th-posa {
  top: -0.1rem;
  left: 0.5rem;
}
.mrt12 {
  margin-top: -0.35rem;
}
.mrt50 {
  margin-top: -0.55rem;
}
.ml36 {
  margin-left: 0.9rem;
}
.ml44 {
  margin-left: 1.1rem;
}
.ml-24 {
  margin-left: 1.4rem;
}
.th-size {
  width: 2.65rem;
  height: 2.65rem;
  margin-left: 0.68rem;
  margin-top: 0.37rem;
}
div {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.activities-class {
  background: linear-gradient(to left, #008cff 0%, #4baeff 100%);
  border-radius: 1rem 0 0 1rem;
}
.mb2-bg {
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/rangBg.png");
  background-size: 100%;
}
.mb2-top-bg {
  background-image: url("../../../assets/i/wap/voting/rangTop.png");
  background-size: 89%;
  background-repeat: no-repeat;
  background-position: bottom;
}
.mb2-bg-center {
  background-image: url("../../../assets/i/wap/voting/bgCenter.png");
  background-size: 100%;
}
.two-mb2-posa {
  top: 0.01rem;
  left: 0.46rem;
  width: 3rem;
}
.one-mb2-posa {
  top: 0.1rem;
  left: 0.55rem;
  width: 3rem;
}
.th-mb2-posa {
  top: 0;
  left: 0.55rem;
  width: 3rem;
}
.mt-05 {
  margin-top: -0.5rem;
}
.mb2-detail-bg {
  background-image: url("../../../assets/i/wap/voting/activityDetailBg.png");
  background-repeat: no-repeat;
  top: -0.1rem;
  padding-top: 0;
  background-size: 100%;
}
.mb3-detail-bg {
  background-color: #ffe562;
  color: #844813;
  border-radius: 1rem 0 0 1rem;
}
.mb3-top-bg {
  background-image: url("../../../assets/i/wap/voting/mb3Rang.png");
  background-size: 96%;
  background-repeat: no-repeat;
  background-position: bottom;
}
.mb3-bg {
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/mb3PlayerBg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.mb3-2br {
  border: 0.15rem solid #c9e0ff;
  width: 2.65rem;
  height: 2.65rem;
  margin-left: 0.7rem;
  margin-top: 0;
}
.mb3-1br {
  border: 0.15rem solid #ffe36c;
  width: 2.65rem;
  height: 2.65rem;
  margin-left: 0.7rem;
  margin-top: 0.2rem;
}
.mb3-3br {
  border: 0.15rem solid #c9e0ff;
  width: 2.7rem;
  height: 2.7rem;
  margin-top: 0;
  margin-left: 0.5rem;
}
.mb2-index-bgColor {
  background-color: #FF5947;
}
.mb3-index-bgColor {
  background-color: #723bee;
}
.fcA35F0C {
  color: #a35f0c;
}
.mb2-2size {
  width: 2.65rem;
  height: 2.65rem;
  margin-left: 0.6rem;
  margin-top: 0.5rem;
}
.mt22 {
  margin-top: 0.55rem;
}
.mt26 {
  margin-top: 0.65rem;
}
.mt64 {
  margin-top: 1.6rem;
}
.mt68 {
  margin-top: 1.7rem;
}
.mt88 {
  margin-top: 2.2rem;
}
.mt92 {
  margin-top: 2.3rem;
}
.mt94 {
  margin-top: 2.35rem;
}
.mt126 {
  margin-top: 3.15rem;
}
.mb1-num1 {
  padding-top: 1.3rem;
}
.mb1-num2 {
  padding-top: 1.35rem;
}
.mb1-num21 {
  bottom: 4.5rem;
}
.mb1-num3 {
  padding-top: 1.3rem;
}
.mb2-num1 {
   padding-top: 1.85rem;
}
.mb2-num2 {
   padding-top: 3.05rem;
}
.mb2-num3 {
  padding-top: 1.45rem;
}
.mb3-num1 {
  bottom: 0.5rem;
}
.hh417 {
  height: 10.425rem;
}
.hh438 {
  height: 10.95rem;
}
.hh448 {
  height: 11.2rem;
}
.hh452 {
  height: 11.3rem;
}
.hh460 {
  height: 11.5rem;
}
.hh471 {
  height: 11.775rem;
}
.hh536 {
  height: 13.5rem;
}
.hh528 {
  height: 13.2rem;
}
.mt74 {
  margin-top: 1.85rem;
}
.mt116 {
  margin-top: 2.9rem;
}
.mt168 {
  margin-top: 4.2rem;
}
.mt164 {
  margin-top: 4.1rem;
}
.mt190 {
  margin-top: 4.75rem;
}
.mt188 {
  margin-top: 4.7rem;
}
.fc-blue {
  color: #008CFF;
}
.bg-blue {
  background-color: #008CFF;
}
.fc-brown {
  color: #97601F;
}
.fc-pruple {
  color: #723BEE;
}
.bg-pruple {
  background-color: #723BEE;
}
.fc-lred {
  color: #FF5947;
}
.bg-lred {
  background-color: #FF5947;
}
.bd1-black {
  border: 1px solid #552813
}
.bd1-black-left {
  border-left: 1px solid #552813
}
.bd1-black-right {
  border-right: 1px solid #552813
}
.lh52 {
  line-height: 1.3rem;
}
.bg-pink {
  background-color:#FFC0B9;
}
.mt7 {
  margin-top: 0.175rem;
}
.ml7 {
  margin-left: 0.175rem;
}
.ph26 {padding-left: 0.65rem; padding-right: 0.65rem;}
.minh440 {
  min-height: 11rem;
}
.pr42 {
  padding-right: 1.05rem;
}
.pt92 {
  padding-top: 2.3rem ;
}
.pt126 {
  padding-top: 3.15rem ;
}
.mr-4 {
  margin-left: -0.1rem;;
}
.flex-basis {
  flex-basis: 0;
}
.beforeLine::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.025rem;
  height: 0.65rem;
  background: #fff;
}
.afterLine::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0.025rem;
  height: 0.65rem;
  background: #fff;
}
</style>